<template>
	<view class="body_box">
		<view class="form-box">
			<view class="row-box line-box">
				<u-icon color="#000" name="account" size="30"></u-icon>
				<view style="width: 30rpx;"></view>
				<u-input placeholder="请输入您的账号" v-model="form.username" border="none"></u-input>
			</view>
			<u-line length="90%" margin="0 5%"></u-line>
			<view class="row-box line-box">
				<u-icon color="#000" name="lock" size="30"></u-icon>
				<view style="width: 30rpx;"></view>
				<u-input placeholder="请输入您的密码" border="none" v-model="form.password" type="password"></u-input>
			</view>
		</view>
		
		<view style="width: 80%;margin-left: 10%;margin-top: 50rpx;">
			<u-button type="success" size="large" @click="loginSubmit()">登录</u-button>
		</view>
		
		<role-popup :show="roleShow" @close="roleShow = false"></role-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roleShow: false,
				form: {
					username: undefined,
					password: undefined
				},
				roleList: [
					{key: 'admin', label:'总账户', value: 0},
					{key: 'quoter', label:'报价师', value: 1},
					{key: 'company', label:'门店公司', value: 2},
					{key: 'store', label:'店长', value: 3},
					{key: 'clerk', label:'店员', value: 4}
				]
			}
		},
		methods: {
			loginSubmit() {
				this.$request("/mobile/login", 'post', this.form).then(res => {
					uni.setStorageSync(this.$constant.API_TOKEN, res.token)
					this.getUserInfo();
				})
				//this.roleShow = true;
			},
			//获取当前用户信息
			getUserInfo() {
				this.$request("/mobile/user/info", "get").then(res => {
					let userInfo = res.data
					userInfo.role = this.roleList[userInfo.type].key;
					
					uni.setStorageSync(this.$constant.TAB_INDEX, 0);
					uni.setStorageSync(this.$constant.ROLE_INFO_KEY, userInfo)
					
					uni.reLaunch({
						url:"/pages/index/index"
					})
				})
			}
		}
	}
</script>

<style>
	.form-box{
		margin-top: 100rpx;
		height: 240rpx;
		border-radius: 30rpx;
		background-color: #fff;
	}
	.line-box {
		height: 120rpx;
		padding-left: 20rpx;
	}
</style>
